<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<div id="div21"></div>
<div id="div22"></div>
<style>
	#div21{
		height: 200px;
		width:500px;
		margin-bottom: 40px;
		background-image:
				linear-gradient(90deg, black 1px,transparent 0),
				linear-gradient(90deg, black 1px,transparent 0),
				linear-gradient(90deg, black 1px,transparent 0);
		background-size: 40px 20px, 4px 7px, 20px 12px;
		background-repeat: repeat-x, repeat-x, repeat-x;
		text-align: center;
	}
	#div22{
		height: 200px;
		width: 500px;
		background-image:
				linear-gradient(black 1px,transparent 0),
				linear-gradient(90deg, red 1px,transparent 0),
				linear-gradient(hsla(0,10%,100%,.3)1px, transparent 0),
				linear-gradient(90deg,hsla(0,10%,100%,.3)1px, transparent 0);
		background-size: 75px 75px,75px 75px, 15px 15px,15px 15px;
	}
</style>
</body>
</html>